import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { visualizer } from 'rollup-plugin-visualizer';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  console.log('启动mode模式:', mode);
  const env = loadEnv(mode, process.cwd(), '');
  const { VITE_API_BASE_URL } = env;
  console.log(VITE_API_BASE_URL, 'VITE_API_BASE_URL=====');

  // 根据环境设置不同的构建配置
  const isProduction = mode === 'production';
  const isDev = mode === 'dev';
  const isTest = mode === 'test';
  const isStaging = mode === 'staging';

  // 根据环境设置不同的 GTM ID
  // 只区分正式环境和其他环境
  const GTM_ID = env.VITE_GTM_ID;
  console.log(`GTM ID for ${mode} environment:`, GTM_ID);

  // 创建 GTM ID 替换插件
  const gtmPlugin = () => {
    return {
      name: 'html-transform',
      transformIndexHtml(html: string) {
        // 替换所有 GTM ID 占位符
        return html.replace(/%VITE_GTM_ID%/g, GTM_ID);
      },
    };
  };

  return {
    plugins: [
      vue(),
      gtmPlugin(),
      visualizer({
        filename: 'dist/stats.html', // 报告写入位置
        open: true, // 构建完自动弹浏览器
        gzipSize: true, // 显示 gzip 后体积
        brotliSize: true, // 显示 brotli 后体积
        template: 'treemap', // 可选 sunburst/network/list
        title: 'My Bundle',
      }),
    ],
    resolve: {
      alias: {
        '@': '/src',
      },
    },
    server: {
      port: 8000, // 开发服务器端口
      host: true, // 允许外部访问
      proxy: {
        // 代理所有以 /api 开头的请求
        '/api': {
          target: VITE_API_BASE_URL,
          // target: 'https://testapi.nexbie.com',
          // target: 'http://1.13.173.62:80',
          changeOrigin: true, // 改变请求头中的origin
          secure: false, // 如果是https接口，需要配置这个参数
          rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径，去掉/api前缀
          configure: (proxy, options) => {
            // 代理配置回调
            proxy.on('error', (err, req, res) => {
              console.log('proxy error', err);
            });
            proxy.on('proxyReq', (proxyReq, req, res) => {
              console.log('Sending Request to the Target:', req.method, req.url);
            });
            proxy.on('proxyRes', (proxyRes, req, res) => {
              console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
            });
          },
        },
      },
    },
    // 构建配置
    build: {
      // 输出目录
      outDir: 'dist',
      // 静态资源目录
      assetsDir: 'assets',
      // 是否生成source map
      sourcemap: !isProduction && !isDev,
      // 是否压缩代码
      minify: isProduction ? 'terser' : 'esbuild',
      // Terser 配置 - 生产环境移除 console
      terserOptions: isProduction
        ? {
            compress: {
              // 移除 console
              drop_console: true,
              // 移除 debugger
              drop_debugger: true,
              // 移除未使用的代码
              dead_code: true,
            },
          }
        : undefined,
      // 构建时清空输出目录
      emptyOutDir: true,
      // 资源内联阈值
      assetsInlineLimit: 4096,
      // 分包配置
      rollupOptions: {
        output: {
          // 分包策略
          manualChunks: isProduction
            ? {
                // 生产环境分包
                'vue-vendor': ['vue', 'vue-router'],
                'ui-vendor': ['element-plus'],
                'utils-vendor': ['axios', 'pinia'],
              }
            : undefined,
          // 资源文件命名 - 所有环境都使用哈希值
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        },
      },
      // 构建目标
      target: 'es2015',
      // CSS代码分割
      cssCodeSplit: true,
      // 报告压缩后的大小
      reportCompressedSize: isProduction,
    },
    // 定义全局常量替换
    define: {
      __APP_VERSION__: JSON.stringify(env.VITE_APP_VERSION || '1.0.0'),
      __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
      __BUILD_MODE__: JSON.stringify(mode),
      __GTM_ID__: JSON.stringify(GTM_ID),
    },
    // 设置环境变量，供 HTML 模板使用
    envPrefix: 'VITE_',
  };
});
